<template>
  <div id="energyId"></div>
</template>
<script setup lang="ts">
import Energy from '@/modules/energyjs/index'
import { Colour } from '@/modules/energyjs/util/style_class'

import { onMounted } from 'vue'
onMounted(async () => {
  let stage = new Energy.Stage('energyId')
  stage.setDimensions({
    width: 500,
    height: 500,
  })
  let Group = new Energy.Group()
  let Rect = new Energy.Rect({
    x: 30,
    y: 70,
    width: 100,
    height: 100,
    cornerRadius: [10, 10, 0, 0],
    fill: 'yellow',
  })
  let Rect1 = new Energy.Rect({
    x: 20,
    y: 40,
    width: 50,
    height: 50,
    cornerRadius: [0, 0, 0, 0],
    fill: '#000',
  })
  let color = new Colour({
    type: 'color',
    color: 'yellow',
  })

  let Circle = new Energy.Circle({
    x: 110,
    y: 100,
    width: 100,
    height: 100,
    angle: 1.2,
    stroke: 'red',
    strokeWidth: 10,
  })

  stage.add(Group)
  stage.add(Rect)
  // Group.add(Rect1)
  stage.add(Circle)

  stage.renderAll()
})
</script>
